<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>动态时钟</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:500px; margin:60px auto; text-align:center}
.demo p{height:60px}
</style>
<script> 
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) { alert("别打算抄代码！");
oncontextmenu='return false';
}
}
if (document.layers) {
if (e.which == 3) {
oncontextmenu='return false';
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
document.oncontextmenu = new Function("return false;")
document.onkeydown =document.onkeyup = document.onkeypress=function(){ 
if(window.event.keyCode == 123) { 
window.event.returnValue=false;
return(false); 
} 
}
</script> 
</head>

<body>
<div id="main">
  <div class="demo">
    <div id="d"></div> 
	<canvas id="clock" width="400" height="400"></canvas> 
  </div>
  <br/>
  <br/>
</div>
<script type="text/javascript">
var time = new Date();
var h = time.getHours(); //时
var m = time.getMinutes(); //分
var s = time.getSeconds(); //秒
h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
//=====================================
var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
 
function draw(){
    var c=document.getElementById("clock");
    var ctx=c.getContext("2d"); //获取绘图对象
    ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
    s++;//秒针
 
    ctx.fillStyle = '#fff' //填充白色背景色 
    ctx.fillRect(0,0,c.width,c.height);   //设置画布区域
 
	//填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
	ctx.beginPath();
	ctx.arc(x,y,10,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
 		
	//填充版权文字
	//ctx.fillStyle="#ccc";
	//ctx.font = "12pt Arial"; 
	//ctx.fillText("helloworld",150,250);
	//调用日期并填充到画布中
	ctx.fillStyle="#666";
	ctx.font = "14pt Verdana";
	ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170);
		
	ctx.save(); //保存当前绘图状态
 
    // 时间刻度
    for(var i=0;i<12;i++){
        var angle=(Math.PI*2)/12;
        ctx.beginPath();//开始绘制
		ctx.font="12px Arial";
        if(i==0||i==3||i==6||i==9){
             ctx.fillStyle="red";
             radius=4;
        }else{
             ctx.fillStyle="blue";
             radius=3;
        }
 
        ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆
        ctx.fill(); //填充路径
        trans(ctx,x,y,angle);  //刻度分布              
    }
    ctx.restore(); //恢复上次保存的绘图状态
 
    sAngle=(Math.PI*2)/60*s; //秒度
	//时针转动
    ctx.save(); 
    ctx.strokeStyle="red";
    ctx.lineWidth=3;
    trans(ctx,x,y,(Math.PI*2)/60*h); 
    pointer(ctx,x,y,y-40);
    ctx.restore();
 	
	//分针转动
	ctx.save();
	ctx.strokeStyle="blue";
	ctx.lineWidth=2;
	trans(ctx,x,y,(Math.PI*2)/60*m); 
	pointer(ctx,x,y,y-68);
	ctx.restore();
 
	//秒针转动
	ctx.save();
	ctx.strokeStyle="#000";
	trans(ctx,x,y,sAngle);  
	pointer(ctx,x,y,y-80);
	ctx.restore();  
 
    //数据整理
    if(s%60==0){
		sAngle=0,s=0,m++;
        if(m%12==0){ //每十二分 时针旋转一次
            if(m!=0)h++;
            if(m%60==0)m=0;
        }
     	if(h%60==0)h=0; 
    }
}
 
//绘制指针
function pointer(ctx,x,y,z){
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x,z);
     ctx.stroke();
     ctx.fill();
}
 
 //据坐标旋转
function trans(ctx,x,y,angle){
     ctx.transform(Math.cos(angle), Math.sin(angle), 
        -Math.sin(angle), Math.cos(angle), 
        x*(1-Math.cos(angle)) + x*Math.sin(angle), 
      	y*(1-Math.cos(angle)) - y*Math.sin(angle))
}
 
setInterval("draw()",1000);
</script>
</body>
</html>
